<template>
    <view>
        <view class="chat-list">
            <view v-if="chatList1.length>0">
                <view class="chat" v-for="(chat,index) in chatList1" :key="index">
                    <view class="row" @tap="toChat(chat)">
                        <view class="left">
                            <image v-if="chat.user.avatar" :src="chat.user.avatar"></image>
                            <image v-else src="https://yl.weilankangyang.com/static/mini_program/images/theme2x.png"></image>
                        </view>
                        <view class="right">
                            <view class="top">
                                <view class="username">{{chat.user.name}}</view>
                                <!-- <view class="time">{{chat.time}}</view> -->
                            </view>
                            <view class="bottom">
                                <!-- <view class="msg">{{chat.msg}}</view> -->

                            </view>
                            <view class="tis" v-if="chat.tisNum>0">
                                <u-badge type="error" max="99" :value="chat.tisNum"></u-badge>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else style="padding-top: 300rpx;">
                <u-empty text="暂无消息" mode="message"></u-empty>
            </view>
        </view>
    </view>
</template>
<script>
import {
    getSingleLists
} from "@/api/chat.js"
import {
    mapState,
    mapMutations,
    mapGetters
} from 'vuex';

export default {
    data() {
        return {
            chatList1: [
                // {
                //     uid: 1,
                //     username: "鲜果蔬专营店",
                //     face: "/static/img/im/face/face_1.jpg",
                //     time: "13:08",
                //     msg: "亲，20点前下单都是当天送达的",
                //     tisNum: 1
                // },
            ]
        }
    },
    //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
    onPullDownRefresh() {
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
    onLoad() {

    },
    onShow() {
        this.getList()
    },
    watch: {
        receiveMsg: {
            handler(val) {
                if (val) {
                    // store.commit('UPDATE_CHATLIST', val)
                    this.getList()
                }
            }
        }
    },
    computed: {
        ...mapState({
            chatList: state => state.user.chatList,
        }),
        ...mapGetters(['receiveMsg']),
    },
    onUnload() {
        this.CLEAR_UNREAD_MESSAGES()
    },
    methods: {
        ...mapMutations(["CLEAR_UNREAD_MESSAGES"]),
        getList() {
            getSingleLists().then(res => {
                if (res.code == 1) {
                    this.chatList1 = res.data
                    for (let i = 0; i < this.chatList1.length; i++) {
                        const currentElement = this.chatList1[i];
                        const correspondingElement = this.chatList.find(item => item.format_uid === currentElement.format_uid);
                        if (correspondingElement) {
                            this.$set(currentElement, 'tisNum', correspondingElement.tisNum);
                        }
                    }
                    console.log(this.chatList1, "this.chatList1111")
                }
            })
        },
        toChat(chat) {
            uni.navigateTo({
                url: "/pagesB/msg/chat/chat?data=" + encodeURIComponent(JSON.stringify(chat))
            })
        }
    }
}
</script>

<style  lang="scss">
page {
  background-color: rgba(0, 0, 0, 0);
}
.chat-list {
  width: 94%;
  padding: 0 3%;
  .chat {
    width: 100%;
    // height: 100upx;
    padding: 20upx 0;
    border-bottom: solid 1upx #eaeaea;
    .row {
      display: flex;
      justify-content: flex-start;
      .left {
        flex-shrink: 0;
        width: 100upx;
        height: 100upx;
        image {
          width: 100upx;
          height: 100upx;
          border-radius: 20upx;
        }
      }
      .right {
        flex-shrink: 1;
        width: 98%;
        padding-left: 2%;
        position: relative;
        .top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .usernam {
            font-size: 26upx;
          }
          .time {
            font-size: 22upx;
            color: #bebebe;
          }
        }
        .bottom {
          width: 100%;
          height: 40upx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .msg {
            font-size: 25upx;
            color: #777;
          }
          .tis {
            width: 35upx;
            height: 35upx;
            font-size: 22upx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #eb4d3d;
            color: #fff;
            border-radius: 100%;
          }
        }
        .tis {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
}
</style>
